import React from 'react';
import PropTypes from 'prop-types';
import Tabs, { TabPane } from '@kuiper-components/tabs';

import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import AlertReceiver from './AlertReceiver';
import AlertGroup from './AlertGroup';
import Wechat from './Wechat';
import s from './AlertSettings.module.css';

export default function AlertSettings({
	history,
	match: {
		params: { type },
	},
}) {
	const handleTypeChange = type => {
		history.push(`/alert/settings/${type}`);
	};

	return (
		<div className={s.alertSettings}>
			<div className={s.header}>
				<Breadcrumb className={s.breadcrumb}>
					<Item disabled key="alert">
						告警中心
					</Item>
					<Item active key="settings">
						告警设置
					</Item>
				</Breadcrumb>
			</div>
			<div className={s.container}>
				<Tabs
					className={s.tabs}
					key={type}
					activeKey={type}
					onChange={handleTypeChange}
				>
					<TabPane key="alert-group" tab="告警策略">
						<AlertGroup />
					</TabPane>
					<TabPane key="alert-receiver" tab="告警人">
						<AlertReceiver />
					</TabPane>
					<TabPane key="wechat" tab="微信">
						<Wechat />
					</TabPane>
				</Tabs>
			</div>
		</div>
	);
}

AlertSettings.propTypes = {
	match: PropTypes.shape({
		params: PropTypes.shape({
			type: PropTypes.string,
		}),
	}),
	history: PropTypes.shape({
		push: PropTypes.func,
	}),
};
